<template>
  <div>
    <div class="top">
      <van-icon class="goback" name="arrow-left" @click="$router.go(-1)" />
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <div class="main">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            @click="changeflag"
            title="品牌推荐"
          ></van-sidebar-item>
          <van-sidebar-item
            v-for="item in goodslist"
            :key="item.gc_id"
            :title="item.gc_name"
            @click="change(item.gc_id)"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <div class="brand" v-if="flag">
          <van-grid :column-num="3" icon-size="70px">
            <van-grid-item
              v-for="item in brandlist "
              :key="item.id"
              :icon="item.brand_pic"
              :text="item.brand_name"
            />
          </van-grid>
        </div>
        <div v-else class="every" v-for="item in cateList" :key="item.gc_id">
          <a href=""
            ><van-icon name="fire-o" color="red" />{{ item.gc_name
            }}<van-icon class="icon2" name="arrow" color="#bbbbbb"
          /></a>
          <div class="goodslist">
            <span v-for="item in item.child" :key="item.id">{{
              item.gc_name
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCatedata, geCatelist, getBranddata } from "../service/api";

export default {
  data() {
    return {
      value: "",
      activeKey: "",
      goodslist: [],
      cateList: [],
      cateLists: [],
      flag: true,
      brandlist: [],
    };
  },
  created() {
    ``;
    getCatedata().then((res) => {
      this.goodslist = res.datas.class_list;
      // console.log(res);
    });
    getBranddata().then((res) => {
      this.brandlist = res.datas.brand_list;
    });
  },
  methods: {
    change(gc_id) {
      geCatelist({ gc_id: gc_id }).then((res) => {
        // console.log(res);
        this.cateList = res.datas.class_list;
        this.flag = false;
      });
    },
    changeflag() {
      this.flag = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  position: fixed;
  z-index: 9;
}
.goback {
  width: 35px;
  height: 20px;
  font-size: 33px;
  position: absolute;
  left: 0;
  top: 10px;
  z-index: 9;
}
.van-search {
  margin-left: 30px;
}
.left {
  width: 19%;
  float: left;
  margin-right: 3px;
  position: fixed;
  top: 54px;
  .van-sidebar-item--select {
    color: red;
  }
}
.right {
  width: 75%;
  float: left;
  font-size: 15px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 20%;
  padding-top: 54px;
  padding-bottom: 70px;
  height: calc(100% - 110px);
  // .brand{
  //   .van-icon__image{
  //     width: 10em;
  //   }
  // }
  img{
    width: 150px;
  }
  .every {
    width: 100%;
    a {
      display: block;
      width: 100%;
      text-align: left;
      height: 30px;
      color: black;
      line-height: 30px;
      background: #fcfcfc;
      margin-left: 15px;
      .icon2 {
        float: right;
        line-height: 30px;
        width: 15px;
      }
    }
    .goodslist {
      text-align: left;
      width: 100%;
      // margin-left: 3px;
      span {
        display: inline-block;
        width: 33%;
        text-align: center;
        font-size: 13px;
        overflow: hidden;
        height: 50px;
        line-height: 50px;
      }
    }
  }
}
</style>>


